<template>
	<div class="companyDiv" @click="toDetail"> 
		<div class="top-wrap">
			<div class="jobDiv" style="width: 30%">{{company.post}}</div>
			<div class="greayText">
				{{company.amount + '人'}} &nbsp;|&nbsp; {{company.beginDate + ' 至 ' + company.endDate}}
			</div>
		</div>
		<div class="bom-wrap">
			<div class="reason-text"> {{company.reason}} </div>
			<div class="companyNameDiv">{{company.companyName}}</div>
		</div>
		<!-- <div class="companyNameDiv">{{company.companyName}}</div>
		<div class="nameDiv">{{company.name}}</div>
		<div class="contentDiv">{{company.reason}}</div>
		<div class="jobTableDiv">
			<div class="rowDiv headerDiv">
				<div class="cellDiv" style="width: 25%">招工需求</div>
				<div class="cellDiv" style="width: 25%">招工人数</div>
				<div class="cellDiv" style="width: 50%; border-right: 0">招工时间</div>
			</div>
			<div class="rowDiv">
				<div class="cellDiv" style="width: 25%">{{company.post}}</div>
				<div class="cellDiv" style="width: 25%">{{company.amount + '人'}}</div>
				<div class="cellDiv" style="width: 50%; border-right: 0">{{company.beginDate + ' 至 ' + company.endDate}}</div></div>
		</div> -->
	</div>
</template>

<script>
	export default {
		name: "companyFrame",
		props: ['company'],
		data() {
			return {
				// company: {
				// 	id: 1,
				// 	companyName: '一家大文化有限公司',
				// 	reson: '关于企业出现用工困难的问题，特发起',
				// 	contenreasont: '公司正处于高速发展之际，由于相关重要岗位人才缺失，尤其是本公司技术岗位严重匮乏。公司也通过相关渠道进行招聘，还是不能满足现在的缺口，特请有关',
				// 	post: '仓库保管员', //招聘岗位
				// 	amount: 30, //招工人数
				// 	beginDate: '2020-01-05', //招工开始时间
				// 	endDate: "2020-01-05" //招工结束时间   
				// }
			}
		},
		methods:{
			toDetail(){
				let id = this.company.id;
				this.$router.push({ path: 'helpCaseDetail', query: {id} });
			}
		}
	}
</script>

<style scoped>
	.companyDiv {
		box-sizing: border-box;
		/* padding: 20px; */
		padding: 0 14px;
		width: 310px;
		border: 1px solid #eeeeee;
		text-align: left;
	}

	.companyDiv:hover{
		cursor: pointer;
	}

	.top-wrap{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid #eee;
	}
	.top-wrap .jobDiv{
		color: #045db9;
		font-size: 18px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-align: left;
	}
	.greayText{
		font-size: 12px;
		color: #999;
	}

	.bom-wrap{
		padding: 16px 0;
	}

	.bom-wrap .reason-text{
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-align: left;
	}
	
	.bom-wrap .companyNameDiv {
		font-size: 14px;
		color: #333;
	}
	/* .companyDiv .companyNameDiv {
		font-size: 10px;
	}

	.companyDiv .nameDiv {
		font-size: 20px;
		font-weight: bold;
		padding: 10px 0;
	}

	.companyDiv .contentDiv {
		font-size: 10px;
		color: #999999;
		margin-bottom: 10px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.companyDiv .jobTableDiv {
		border: 1px solid #e5ebf3;
		font-size: 10px;
	}

	.companyDiv .jobTableDiv .rowDiv {
		display: flex;
		justify-content: space-between;
		color: #045db9;
	}

	.companyDiv .jobTableDiv .rowDiv .cellDiv {
		text-align: center;
		padding: 8px;
		border-right: 1px solid #e5ebf3;
	}

	.companyDiv .jobTableDiv .headerDiv {
		background-color: #f4fbff;
		color: #333333;
	} */

</style>
